<!---
 * @Name: CollapseIcon
 * @Author: Administrator
 * @Owner:
 * @Date: 2024-08-22 09:56
 * @LastEditTime: 2024-08-22 09:56
 * @LastEditors: Administrator
 * @Description:
 * @FilePath: /src/layouts/components/Header/components\CollapseIcon.vue
--->
<template>
  <el-icon class="collapse-icon" @click="changeCollapse">
    <component :is="appStore.isCollapse ? 'expand' : 'fold'"></component>
  </el-icon>
</template>

<script setup>
import { useAppStore } from "@/stores/modules/desktop.js";

const appStore = useAppStore();
const changeCollapse = () => appStore.setAppState("isCollapse", !appStore.isCollapse);
</script>
<style scoped lang="scss">
.collapse-icon {
  margin-right: 20px;
  font-size: 22px;
  color: var(--el-header-text-color);
  cursor: pointer;
}
</style>
